<template>
    <div class="FromGood">
        <el-form :model="person" label-width="120px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="personname" style="width: 400px;">
                <el-input v-model="person.personname"></el-input>
            </el-form-item>

            <el-form-item label="出生日期" prop="birthday">
                <el-date-picker v-model="person.birthday" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="学历" prop="education" style="width: 400px;">
                <el-input v-model="person.education"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email" style="width: 400px;">
                <el-input v-model="person.email"></el-input>
            </el-form-item>
            <el-form-item label="所在地" prop="area" style="width: 400px;">
                <el-input v-model="person.area"></el-input>
            </el-form-item>
            <el-form-item label="职业" prop="profession" style="width: 400px;">
                <el-input v-model="person.profession"></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="region">
                <el-upload action="#" ref="upload" :on-preview="handlePreview" :on-remove="handleRemove"
                    list-type="picture-card" :http-request="handleFileUpload" :file-list="fileList">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="技能" prop="skill">
                <el-input v-model="person.skill"></el-input>
            </el-form-item>
            <el-form-item label="掌握技能" prop="technology">
                <el-input type="textarea" :rows="5" v-model="person.technology"></el-input>
            </el-form-item>
            <el-form-item label="工作经历" prop="text">
                <wangEditorCom @catchData="catchData" ref="editorRef" v-if="sonContent" :content="sonContent">
                </wangEditorCom>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import wangEditorCom from '../../components/upload/wangEditorCom.vue';
import { AlbumUpload } from '@/assets/api/fileUpload.js';
import { updateInfos, queryDetails } from '@/assets/api/personInfo.js'
export default {
    data() {
        return {
            sonContent: "",
            imageList: [],
            fileList: [],
            person: {
                personname: '',
                birthday: '',
                education: '',
                email: '',
                area: '',
                profession: "",
                profile: '',
                skill: '',
                technology: '',
                workExperience: '',
            },

            dialogImageUrl: '',
            dialogVisible: false

        }
    },
    components: {
        wangEditorCom
    },

    mounted() {
       this.queryPerson();
    },
    methods: {
        submitForm() {
            var imgStr = '';
            if (this.imageList.length > 0) {
                imgStr = this.imageList.toString();
                this.person.profile = imgStr;
            }
            this.person.technology=this.person.technology.replace(/\n|\r\n/g,'<br>');
            updateInfos(this.person).then((resp) => {
                if (resp.code == 200) {
                    //关闭当前卡签页
                    this.$message.success("保存成功")
                }
            })
        },
        //查询用户信息
        queryPerson() {
            queryDetails().then((resp) => {
                if (resp.code == 200) {
                    this.person=resp.data;
                    this.sonContent = resp.data.workExperience
                    this.person.technology=this.person.technology.replace(/<br>/g,'\r\n');
                    if (this.person.profile != '') {
                        this.imageList = this.person.profile.split(",")
                    }
                    if (resp.data.imageList.length > 0) {
                        for (var i = 0; i < resp.data.imageList.length; i++) {
                            this.fileList.push({
                                "name": resp.data.imageList[i].pictureId
                                , "url": resp.data.imageList[i].pictureUrl
                            })
                        }
                    }
                }
            })
        },

        //获取富文本内容
        catchData(content, text) {
            this.person.workExperience = content;
        },
        // 处理移除操作
        handleRemove(file, fileList) {
            var fileName = file.name;
            deleteFile(fileName).then((resp) => {
                if (resp.code == 200) {
                    this.imageList = this.imageList.filter(item => item != fileName)
                }
            })
        },
        // 处理预览操作
        handlePreview(file) {
            console.log(file);
        },
        // 处理文件上传操作
        handleFileUpload(file) {
            this.loading = true;
            var form = new FormData();
            // 添加键值对
            form.append("file", file.file);
            // 调用后端服务器的接口
            AlbumUpload(form).then((resp) => {
                this.dialogImageUrl = resp.data.pictureUrl;
                this.imageList.push(resp.data.pictureId)
            }).catch((e) => {
                this.$message.error(e.message);
                this.$refs.upload.clearFiles();
            })
        }
    }
}
</script>

<style scoped>
.FromGood {
    width: 100%;
    min-height: 100%;
    padding: 40px;
    box-sizing: border-box;
}
</style>
